<template>
  <div id="property">
    <div class="property-inner" v-if="isPass">
      <!-- <h2 class="item">坐落地址：厦门市湖里区莲花小区{{propetyInfo.address}}</h2>
      <h2 class="item">建筑面积：120{{propetyInfo.area}}㎡</h2>
      <h2 class="item">产权类型：住宅{{propetyInfo.htype}}</h2>-->
      <!-- 已经添加的产权证列表 -->
      <div class="property-list">
        <div class="property-item" v-for="(item,index) in propetyInfo" :key="index">
          <md-bill>
            <div class="header-slot" slot="header">
              <h1 class="title">{{item.address}}</h1>
            </div>
            <md-detail-item title="类型">{{item.htype}}</md-detail-item>
            <md-detail-item title="面积">{{item.area}}㎡</md-detail-item>
          </md-bill>
        </div>
      </div>
      <div class="button-block">
        <button class="y-btn" @click="joinVote">产权信息正确，进入投票</button>
        <button class="n-btn" @click="exitVote">已投票完毕，我要退出</button>
      </div>
    </div>
    <div class="no-pass" v-else>
      <h1>资料正在审核</h1>
      <p>提示：可通知现场工作人员审核</p>
      <div class="button-block">
        <button @click="getChanQuanInfo">刷新</button>
      </div>
    </div>
  </div>
</template>

<script>
import https from "@/https";
import config from "@/config";
import {
  Toast,
  Dialog,
  ScrollView,
  NoticeBar,
  Icon,
  ImageReader,
  Tag,
  Agree,
  Button,
  Bill,
  DetailItem,
  Radio,
  RadioList
} from "mand-mobile";

export default {
  components: {
    [Dialog.name]: Dialog,
    [ScrollView.name]: ScrollView,
    [NoticeBar.name]: NoticeBar,
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
    [Tag.name]: Tag,
    [Agree.name]: Agree,
    [Button.name]: Button,
    [Bill.name]: Bill,
    [DetailItem.name]: DetailItem,
    [Radio.name]: Radio,
    [RadioList.name]: RadioList
  },
  name: "property",
  data() {
    return {
      isPass: false,
      propetyInfo: {
      }
    };
  },
  methods: {
    // 获取产权信息
    getChanQuanInfo() {
      Toast.loading("加载中...");
      let params = {
        number: this.$route.query.number,
        qid: this.$store.state.residentialType.qid
      };
      https
        .fetchPost(config.getTemporaryAudited, params)
        .then(res => {
          Toast.hide();
          if (res.data.code == 1) {
            this.isPass = true;
            let propetyInfo = res.data.data;
            this.propetyInfo = propetyInfo;
          } else {
            this.isPass = false;
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          Toast.hide();
          console.log(err);
        });
    },
    joinVote() {
      this.$router.push({
        path: "/localeVoteList",
        query: {id_card: this.propetyInfo[0].id_card}
      });
    },
    // 保存信息
    exitVote() {
      let _this = this;
      Dialog.confirm({
        title: "提示",
        content: "确认退出现场投票？",
        confirmText: "确定",
        onConfirm: () => {
          _this.$router.go(-1);
        }
      });
    }
  },
  created() {
    this.getChanQuanInfo();
  },
  mounted() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.no-pass {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;
  color: #444444;
  h1 {
    font-size: 70px;
    line-height: 120px;
  }
  p {
    font-size: 24px;
    margin-top: 20px;
    color: #999;
  }
  .button-block {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    button {
      border: none;
      width: 300px;
      height: 80px;
      // background: #555;
      background: #2f86f6;
      color: #fff;
      font-size: 32px;
      border-radius: 40px;
      outline: none;
    }
  }
}

.property-inner {
  position: relative;
  height: 100vh;
  .property-list {
    padding: 30px 0 300px;
  }
  .property-item {
    position: relative;
    padding: 20px 30px;
    .md-bill {
      background-color: #fff;
      box-shadow: 0 6px 24px #ccc;
      .md-detail-item {
        padding: 5px;
      }
      .md-bill-neck {
        position: relative;
        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 0;
          width: 36px;
          height: 36px;
          border-radius: 18px;
          background-color: red;
        }
        &::before {
          left: 0px;
        }
        &::after {
          right: 0px;
        }
      }
      .header-slot {
        position: relative;
        width: 100%;
        .del-btn {
          position: absolute;
          right: 0;
          top: 0;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $themeGold;
        }
        .title {
          // color: $themeGold;
          color: #333;
          font-size: 26px;
          line-height: 1.2;
          width: 90%;
          strong {
            font-size: 50px;
          }
        }
        .desc {
          margin-top: 16px;
          color: #858b9c;
          font-size: 26px;
          line-height: 40px;
        }
      }
    }
  }
  .item {
    display: flex;
    align-items: center;
    padding: 0 40px;
    font-size: 30px;
    color: #444;
    margin-bottom: 30px;
    &::before {
      content: "";
      display: block;
      height: 38px;
      border-left: 6px solid $themeGold;
      margin-right: 28px;
    }
  }
  .button-block {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    button {
      border: none;
      width: 500px;
      height: 80px;
      // background: #555;
      background: #2f86f6;
      color: #fff;
      font-size: 30px;
      border-radius: 40px;
      outline: none;
      margin-top: 30px;
      &.y-btn {
        background: #2f86f6;
      }
      &.n-btn {
        background: #ff5257;
      }
    }
  }
}
</style>
